<template>
  <m-popup :visible.sync="show" :title="title" height="90vh" @close="handleClose" @open="handleOpen">
    <view slot="header" class="header">
      <view class="header-title">
        <m-icon name="loading" size="42" v-if="loading" />
        <u-icon name="reload" @click="handleRefresh" v-else />
        <text>{{ title }} </text>
      </view>
      <m-searchbar
        rightout="搜索"
        input-background="#fff"
        v-model="keyWorld"
        placeholder="请输入您想搜索的内容"
        @search="handleSearch"
        @clear="handleSearch"
        @change="handleSearch"
      />
    </view>
    <item-scroll :options="getList" ref="scroll">
      <template v-slot:default="slotProps">
        <view
          :class="{ cell: true, active: innerValue === item.value }"
          v-for="(item, index) in slotProps.data"
          :key="index"
          @click="handleItemClick(item)"
        >
          <view class="label">
            <rich-text :nodes="getTitle(item.label)" />
            <rich-text
              class="label__sub"
              :nodes="getTitle(item.skuCode + (item.supplier ? '/' + item.supplier : ''))"
              v-if="item.skuCode || item.supplier"
            />
          </view>

          <m-icon name="check" color="#248DFA" size="32" v-if="innerValue === item.value"></m-icon>
        </view>
      </template>
    </item-scroll>
    <view slot="footer" class="footer">
      <m-button size="xl" type="default" plain width="26%" @click="handleClose">取消 </m-button>
      <m-button size="xl" width="70%" @click="handleOk"> 保存 </m-button>
    </view>
  </m-popup>
</template>

<script>
import ItemScroll from './item-scroll'
export default {
  props: {
    title: {
      type: String,
      default: '选择sku',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: '',
    },
  },
  watch: {
    visible(val) {
      this.show = val
    },
  },
  computed: {
    getTitle() {
      return (str) => {
        const { keyWorld } = this
        return (str || '').replace(new RegExp(keyWorld, 'gi'), `<span style='color:red'>${keyWorld}</span>`)
      }
    },
    getList() {
      return this.options.filter((item) => {
        return (
          item.label.includes(this.keyWorld) ||
          (item.skuCode || '').includes(this.keyWorld) ||
          (item.supplier || '').includes(this.keyWorld)
        )
      })
    },
  },
  components: {
    ItemScroll,
  },
  data() {
    return {
      keyWorld: '',
      innerValue: '',
      show: false,
      loading: false,
    }
  },
  methods: {
    handleSearch() {
      this.$refs.scroll.downCallback()
    },
    async handleRefresh() {
      this.loading = true
      try {
        await this.$store.dispatch('cache/fetchData')
        await this.$store.dispatch('outWork/setDicts')
        this.loading = false
        uni.showToast({
          title: '刷新数据成功',
        })
      } catch (e) {
        this.loading = false
        uni.showToast({
          title: '刷新数据失败，请稍后再试',
          icon: 'error',
        })
      }
    },
    handleOpen() {
      this.innerValue = this.value
      this.handleSearch()
    },
    handleItemClick(e) {
      this.innerValue = e.value !== null ? +e.value : e.value
    },
    handleOk() {
      this.$emit('input', this.innerValue)
      this.$emit('confirm', this.innerValue)
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: -40rpx;
  &-title {
    margin: 0 30rpx;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
    text {
      flex: 1;
      margin-left: -40rpx;
    }
  }
}
.footer {
  display: flex;
  justify-content: space-between;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  &:last-child {
    border-bottom: none;
  }
  &.active {
    .label {
      color: #248dfa;
      &__sub {
        color: #248dfa;
      }
    }
  }
  .label {
    font-size: 36rpx;
    color: #333;
    &__sub {
      font-size: 28rpx;
      margin-top: 6rpx;
      display: block;
      color: #999;
    }
  }
}
</style>
